<script setup lang="js">

</script>
<template>
    <!--头部组件容器-->
    <div class="top-header">
        <!--左侧样式-->
        <dv-decoration-8 class="dv-decoration-8"/>
        <!--中间样式-->
        <dv-decoration-5 class="dv-decoration-5"/>
        <!--右侧侧样式-->
        <dv-decoration-8 :reverse="true" class="dv-decoration-8-reverse"/>
        <!--头部标题-->
        <div class="dv_title">基于Spark心脏病分析与可视化</div>
    </div>
</template>
<style lang="css" scoped>
    /**头部组件容器 */
    .top-header{
        width: 100%;
        height: 100px;
        /**弹性布局 */
        display: flex;
        justify-content: space-between;
        padding: 20px;
    }
    .dv-decoration-8,.dv-decoration-8-reverse{
        width: 25%;
        height: 60px;
    }
    .dv-decoration-5{
        width: 40%;
        height: 60px;
        margin-top: 30px;
    }
    .dv_title{
        position: absolute;
        left: 39%;
        top: 14px;
        font-size: 33px;
        font-weight: bold;
    }
</style>